<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{% block title %}项目管理系统{% endblock %}</title>
    <!-- 网页图标 -->
    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2285%22>🌍</text></svg>">
    <!-- 引入Google字体 - Noto Sans SC -->
    <link href="https://fonts.loli.net/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <!-- Tailwind CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='dist.css') }}">
    <!-- Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- ECharts图表库 -->
    <script src="{{ url_for('static', filename='js/echarts.min.js') }}"></script>
    {% block extra_css %}{% endblock %}
    {% block styles %}{% endblock %}
    <!-- 引入项目特定样式 -->
    <link rel="stylesheet" href="{{ url_for('static', filename='project.css') }}">
    <style>
        /* 防止页面宽度扩展 */
        body {
            overflow-x: hidden;
        }
        .ml-\[250px\] {
            overflow-x: hidden;
        }
        header {
            overflow-x: hidden;
        }
        main {
            overflow-x: hidden;
        }
        /* 限制用户信息区域宽度 */
        header .flex {
            max-width: 100%;
        }
        header .flex > div:first-child {
            flex-shrink: 0;
            margin-right: 20px;
        }
        header .flex > div:last-child {
            flex-shrink: 0;
        }
        
        /* 用户下拉菜单样式 */
        .user-dropdown {
            position: fixed;
            z-index: 9999;
        }
    </style>
</head>
<body class="min-h-screen flex flex-col">
    <div class="flex">
        <!-- 侧边栏导航 -->
        <aside class="fixed inset-y-0 left-0 w-[250px] bg-gray-900 text-white shadow-lg z-20 transition-sidebar">
            <!-- 系统标题/Logo区域 -->
            <div class="flex items-center p-4 border-b border-gray-800">
                <i class="fas fa-tasks text-xl text-primary mr-2"></i>
                <span class="font-bold text-xl">项目管理系统</span>
            </div>
            
            <!-- 主导航菜单 -->
            <nav class="py-4">
                <ul class="space-y-1">
                    <li>
                    <a href="{{ url_for('main.home') }}" class="flex items-center px-3 py-2 text-sm rounded-md text-gray-300 hover:bg-gray-800 hover:text-white {% if current_page == 'home' %}bg-gray-800 text-white{% endif %}">
                        <i class="fas fa-home w-5 text-center mr-2"></i>
                        <span class="font-medium">首页</span>
                    </a>
                </li>
                    <!-- 项目管理菜单 -->
                    <li>
                        <div class="project-menu">
                            <a href="#" class="flex items-center justify-between px-3 py-2 text-sm rounded-md text-gray-300 hover:bg-gray-800 hover:text-white {% if current_menu == 'project' %}bg-gray-800 text-white{% endif %}" onclick="toggleMenu(event, 'project-submenu')">
                                <div class="flex items-center">
                                    <i class="fas fa-folder-open w-5 text-center mr-2"></i>
                                    <span class="font-medium">项目管理</span>
                                </div>
                                <i class="fas fa-chevron-down text-xs transition-transform {% if current_menu == 'project' %}rotate-180{% endif %}" id="project-submenu-icon"></i>
                            </a>
                            <ul id="project-submenu" class="pl-8 mt-1 space-y-1 {% if current_menu != 'project' %}hidden{% endif %}">
                                <li>
                                    <a href="{{ url_for('main.dashboard') }}" class="flex items-center px-3 py-2 text-sm rounded-md text-gray-400 hover:bg-gray-800 hover:text-white {% if current_page == 'dashboard' %}bg-gray-800 text-white{% endif %}">
                                        <i class="fas fa-chart-bar w-5 text-center mr-2"></i>
                                        <span>项目看板</span>
                                    </a>
                                </li>
                                <li>
                                      <a href="{{ url_for('project.list_projects') }}" class="flex items-center px-3 py-2 text-sm rounded-md text-gray-400 hover:bg-gray-800 hover:text-white {% if current_page == 'project_list' %}bg-gray-800 text-white{% endif %}">
                                          <i class="fas fa-list w-5 text-center mr-2"></i>
                                          <span>项目列表</span>
                                      </a>
                                  </li>

                                  <li>
                                      <a href="{{ url_for('main.progress_tracking') }}" class="flex items-center px-3 py-2 text-sm rounded-md text-gray-400 hover:bg-gray-800 hover:text-white {% if current_page == 'progress_tracking' %}bg-gray-800 text-white{% endif %}">
                                          <i class="fas fa-tasks w-5 text-center mr-2"></i>
                                          <span>进度跟踪</span>
                                      </a>
                                  </li>
                            </ul>
                        </div>
                    </li>
                    
                    <!-- 工时管理菜单 -->
                    <li>
                        <div class="work-hour-menu">
                            <a href="#" class="flex items-center justify-between px-3 py-2 text-sm rounded-md text-gray-300 hover:bg-gray-800 hover:text-white {% if current_menu == 'work_hour' %}bg-gray-800 text-white{% endif %}" onclick="toggleMenu(event, 'work-hour-submenu')">
                                <div class="flex items-center">
                                    <i class="fas fa-clock w-5 text-center mr-2"></i>
                                    <span class="font-medium">工时管理</span>
                                </div>
                                <i class="fas fa-chevron-down text-xs transition-transform {% if current_menu == 'work_hour' %}rotate-180{% endif %}" id="work-hour-submenu-icon"></i>
                            </a>
                            <ul id="work-hour-submenu" class="pl-8 mt-1 space-y-1 {% if current_menu != 'work_hour' %}hidden{% endif %}">
                                <li>
                                    <a href="{{ url_for('work_hour.list_work_hours') }}" class="flex items-center px-3 py-2 text-sm rounded-md text-gray-400 hover:bg-gray-800 hover:text-white {% if current_page == 'work_hour_management' %}bg-gray-800 text-white{% endif %}">
                                        <i class="fas fa-home w-5 text-center mr-2"></i>
                                        <span>工时管理</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="{{ url_for('work_hour.stats') }}" class="flex items-center px-3 py-2 text-sm rounded-md text-gray-400 hover:bg-gray-800 hover:text-white {% if current_page == 'stats' %}bg-gray-800 text-white{% endif %}">
                                        <i class="fas fa-chart-bar w-5 text-center mr-2"></i>
                                        <span>工时统计</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="{{ url_for('work_hour.create') }}" class="flex items-center px-3 py-2 text-sm rounded-md text-gray-400 hover:bg-gray-800 hover:text-white {% if current_page == 'work_hour_create' %}bg-gray-800 text-white{% endif %}">
                                        <i class="fas fa-plus-circle w-5 text-center mr-2"></i>
                                        <span>工时填报</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="{{ url_for('work_hour.work_hour_deviation') }}" class="flex items-center px-3 py-2 text-sm rounded-md text-gray-400 hover:bg-gray-800 hover:text-white {% if current_page == 'work_hour_deviation' %}bg-gray-800 text-white{% endif %}">
                                        <i class="fas fa-exclamation-triangle w-5 text-center mr-2"></i>
                                        <span>工时偏差分析</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="{{ url_for('work_hour.report') }}" class="flex items-center px-3 py-2 text-sm rounded-md text-gray-400 hover:bg-gray-800 hover:text-white {% if current_page == 'work_hour_report' %}bg-gray-800 text-white{% endif %}">
                                        <i class="fas fa-tachometer-alt w-5 text-center mr-2"></i>
                                        <span>工时看板</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <!-- 线索管理菜单 -->
                    <li>
                        <div class="lead-menu">
                            <a href="#" class="flex items-center justify-between px-3 py-2 text-sm rounded-md text-gray-300 hover:bg-gray-800 hover:text-white {% if current_menu == 'lead' %}bg-gray-800 text-white{% endif %}" onclick="toggleMenu(event, 'lead-submenu')">
                                <div class="flex items-center">
                                    <i class="fas fa-lightbulb w-5 text-center mr-2"></i>
                                    <span class="font-medium">线索管理</span>
                                </div>
                                <i class="fas fa-chevron-down text-xs transition-transform {% if current_menu == 'lead' %}rotate-180{% endif %}" id="lead-submenu-icon"></i>
                            </a>
                            <ul id="lead-submenu" class="pl-8 mt-1 space-y-1 {% if current_menu != 'lead' %}hidden{% endif %}">
                                <li>
                                    <a href="{{ url_for('lead.lead_list') }}" class="flex items-center px-3 py-2 text-sm rounded-md text-gray-400 hover:bg-gray-800 hover:text-white {% if current_page == 'lead_list' %}bg-gray-800 text-white{% endif %}">
                                        <i class="fas fa-lightbulb w-5 text-center mr-2"></i>
                                        <span>线索管理</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="{{ url_for('lead.lead_pool') }}" class="flex items-center px-3 py-2 text-sm rounded-md text-gray-400 hover:bg-gray-800 hover:text-white {% if current_page == 'lead_pool' %}bg-gray-800 text-white{% endif %}">
                                        <i class="fas fa-swimming-pool w-5 text-center mr-2"></i>
                                        <span>线索池</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    
                    <!-- 客户管理菜单 -->
                    <li>
                        <div class="customer-menu">
                            <a href="#" class="flex items-center justify-between px-3 py-2 text-sm rounded-md text-gray-300 hover:bg-gray-800 hover:text-white {% if current_menu == 'customer' %}bg-gray-800 text-white{% endif %}" onclick="toggleMenu(event, 'customer-submenu')">
                                <div class="flex items-center">
                                    <i class="fas fa-users w-5 text-center mr-2"></i>
                                    <span class="font-medium">客户管理</span>
                                </div>
                                <i class="fas fa-chevron-down text-xs transition-transform {% if current_menu == 'customer' %}rotate-180{% endif %}" id="customer-submenu-icon"></i>
                            </a>
                            <ul id="customer-submenu" class="pl-8 mt-1 space-y-1 {% if current_menu != 'customer' %}hidden{% endif %}">
                                <li>
                                    <a href="{{ url_for('customer.list_customers') }}" class="flex items-center px-3 py-2 text-sm rounded-md text-gray-400 hover:bg-gray-800 hover:text-white {% if current_page == 'customer_list' %}bg-gray-800 text-white{% endif %}">
                                        <i class="fas fa-user-friends w-5 text-center mr-2"></i>
                                        <span>客户列表</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="{{ url_for('followup.list_followups') }}" class="flex items-center px-3 py-2 text-sm rounded-md text-gray-400 hover:bg-gray-800 hover:text-white {% if current_page == 'followup_list' %}bg-gray-800 text-white{% endif %}">
                                        <i class="fas fa-tasks w-5 text-center mr-2"></i>
                                        <span>客户跟进</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="{{ url_for('followup.statistics') }}" class="flex items-center px-3 py-2 text-sm rounded-md text-gray-400 hover:bg-gray-800 hover:text-white {% if current_page == 'followup_statistics' %}bg-gray-800 text-white{% endif %}">
                                        <i class="fas fa-chart-bar w-5 text-center mr-2"></i>
                                        <span>跟进统计</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <!-- 系统管理菜单 -->
                    <li>
                        <div class="system-menu">
                            <a href="#" class="flex items-center justify-between px-3 py-2 text-sm rounded-md text-gray-300 hover:bg-gray-800 hover:text-white {% if current_menu == 'system' %}bg-gray-800 text-white{% endif %}" onclick="toggleMenu(event, 'system-submenu')">
                                <div class="flex items-center">
                                    <i class="fas fa-cog w-5 text-center mr-2"></i>
                                    <span class="font-medium">系统管理</span>
                                </div>
                                <i class="fas fa-chevron-down text-xs transition-transform {% if current_menu == 'system' %}rotate-180{% endif %}" id="system-submenu-icon"></i>
                            </a>
                            <ul id="system-submenu" class="pl-8 mt-1 space-y-1 {% if current_menu != 'system' %}hidden{% endif %}">
                                <li>
                                    <a href="{{ url_for('user.user_list') }}" class="flex items-center px-3 py-2 text-sm rounded-md text-gray-400 hover:bg-gray-800 hover:text-white {% if current_page == 'user_list' %}bg-gray-800 text-white{% endif %}">
                                        <i class="fas fa-user-cog w-5 text-center mr-2"></i>
                                        <span>用户管理</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="{{ url_for('message.system_message_list') }}" class="flex items-center px-3 py-2 text-sm rounded-md text-gray-400 hover:bg-gray-800 hover:text-white {% if current_page == 'system_message_list' %}bg-gray-800 text-white{% endif %}">
                                        <i class="fas fa-envelope w-5 text-center mr-2"></i>
                                        <span>消息列表</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </nav>
            
            <!-- 底部版权信息 -->
            <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-800">
                <p class="text-xs text-gray-500 text-center">© 2025 项目管理系统 版权所有</p>
            </div>
        </aside>

        <!-- 主要内容区域 -->
        <div class="ml-[250px] flex-1">
            <!-- 顶部导航栏 -->
            <header class="bg-white shadow-sm">
                <div class="flex justify-between items-center px-6 py-2">
                    <!-- 标题区域 -->
                    <div>
                        <h1 class="text-xl font-bold text-gray-800">{% block page_title %}{% endblock %}</h1>
                        <p class="text-sm text-gray-500 mt-1">{% block page_subtitle %}{% endblock %}</p>
                    </div>
                   
                    <!-- 右侧功能区 -->
                    <div class="flex items-center space-x-4">
                        <!-- 通知图标 -->
                        <div class="relative">
                            <button class="p-2 text-gray-500 hover:text-gray-600">
                                <i class="fas fa-bell"></i>
                                <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs w-4 h-4 flex items-center justify-center rounded-full">3</span>
                            </button>
                        </div>
                       
                        <!-- 用户信息 -->
                        {% if current_user.is_authenticated %}
                        <div class="relative user-menu">
                            <button class="flex items-center focus:outline-none user-menu-button">
                                <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center mr-2">
                                    <i class="fas fa-user text-white"></i>
                                </div>
                                <span class="text-sm font-medium text-gray-700">{{ current_user.name if current_user.name else current_user.username }}</span>
                                <i class="fas fa-chevron-down ml-1 text-xs text-gray-500"></i>
                            </button>
                            
                            <!-- 用户下拉菜单 -->
                            <div class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 user-dropdown">
                                <a href="{{ url_for('main.home') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">个人资料</a>
                                <a href="{{ url_for('main.home') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">设置</a>
                                <a href="{{ url_for('auth.logout') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">退出登录</a>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </header>

            <!-- 主体内容 -->
            <main class="p-4 bg-gray-50 h-[calc(100vh-56px)] overflow-auto">
                <!-- Flash消息提示 -->
                {% with messages = get_flashed_messages(with_categories=true) %}
                    {% if messages %}
                        <div id="flash-messages" class="fixed top-16 right-4 z-50 space-y-2">
                            {% for category, message in messages %}
                                <div class="flash-message {{ 'bg-green-500' if category == 'success' else 'bg-red-500' if category == 'error' else 'bg-blue-500' }} text-white px-4 py-3 rounded-md shadow-lg flex items-center justify-between min-w-[300px] max-w-md">
                                    <div class="flex items-center">
                                        <i class="fas {{ 'fa-check-circle' if category == 'success' else 'fa-exclamation-circle' if category == 'error' else 'fa-info-circle' }} mr-2"></i>
                                        <span>{{ message }}</span>
                                    </div>
                                    <button type="button" class="ml-4 text-white hover:text-gray-200 focus:outline-none" onclick="this.parentElement.remove()">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            {% endfor %}
                        </div>
                    {% endif %}
                {% endwith %}
                
                {% block content %}{% endblock %}
            </main>
        </div>
    </div>

    <script>
        // 切换菜单展开/折叠 - 全局函数
        function toggleMenu(event, menuId) {
            // 阻止事件冒泡和默认行为
            event.preventDefault();
            event.stopPropagation();
            
            console.log('toggleMenu called with:', menuId);
            const submenu = document.getElementById(menuId);
            const icon = document.getElementById(menuId + '-icon');
            
            if (!submenu) {
                console.error('Submenu not found:', menuId);
                return false;
            }
            
            if (!icon) {
                console.error('Icon not found:', menuId + '-icon');
                return false;
            }
            
            // 获取所有子菜单
            const allSubmenus = document.querySelectorAll('[id$="-submenu"]');
            const allIcons = document.querySelectorAll('[id$="-submenu-icon"]');
            
            console.log('Found submenus:', allSubmenus.length);
            console.log('Found icons:', allIcons.length);
            
            if (submenu.classList.contains('hidden')) {
                // 展开菜单
                console.log('Expanding menu:', menuId);
                
                // 先折叠所有其他菜单
                allSubmenus.forEach(menu => {
                    if (menu.id !== menuId) {
                        menu.classList.add('hidden');
                        console.log('Hiding menu:', menu.id);
                    }
                });
                
                // 重置所有其他菜单的图标
                allIcons.forEach(submenuIcon => {
                    if (submenuIcon.id !== menuId + '-icon') {
                        submenuIcon.classList.remove('rotate-180');
                    }
                });
                
                // 展开当前菜单
                submenu.classList.remove('hidden');
                icon.classList.add('rotate-180');
                console.log('Menu expanded:', menuId);
            } else {
                // 折叠菜单
                console.log('Collapsing menu:', menuId);
                submenu.classList.add('hidden');
                icon.classList.remove('rotate-180');
                console.log('Menu collapsed:', menuId);
            }
            
            return false;
        }
        

        // 用户下拉菜单
        (function() {
            // 等待DOM完全加载
            function initUserDropdown() {
                const userMenuButton = document.querySelector('.user-menu-button');
                const userDropdown = document.querySelector('.user-dropdown');
                
                if (userMenuButton && userDropdown) {
                    // 移除之前的事件监听器（如果有）
                    userMenuButton.removeEventListener('click', handleUserMenuClick);
                    document.removeEventListener('click', handleDocumentClick);
                    userDropdown.removeEventListener('click', handleDropdownClick);
                    
                    // 添加新的事件监听器
                    userMenuButton.addEventListener('click', handleUserMenuClick);
                    document.addEventListener('click', handleDocumentClick);
                    userDropdown.addEventListener('click', handleDropdownClick);
                }
            }
            
            // 处理用户菜单按钮点击事件
            function handleUserMenuClick(e) {
                e.preventDefault();
                e.stopPropagation();
                const userDropdown = document.querySelector('.user-dropdown');
                if (userDropdown) {
                    userDropdown.classList.toggle('hidden');
                }
            }
            
            // 处理文档点击事件
            function handleDocumentClick() {
                const userDropdown = document.querySelector('.user-dropdown');
                if (userDropdown && !userDropdown.classList.contains('hidden')) {
                    userDropdown.classList.add('hidden');
                }
            }
            
            // 处理下拉菜单点击事件
            function handleDropdownClick(e) {
                e.stopPropagation();
            }
            
            // 初始化
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', initUserDropdown);
            } else {
                // DOM已经加载完成，直接初始化
                initUserDropdown();
            }
        })();
        
        // Flash消息自动隐藏功能
        (function() {
            function initFlashMessages() {
                const flashMessages = document.querySelectorAll('.flash-message');
                
                flashMessages.forEach((message, index) => {
                    // 延迟显示动画
                    setTimeout(() => {
                        message.style.opacity = '0';
                        message.style.transform = 'translateX(100%)';
                        message.style.transition = 'all 0.3s ease-out';
                        
                        // 显示动画
                        setTimeout(() => {
                            message.style.opacity = '1';
                            message.style.transform = 'translateX(0)';
                        }, 50);
                        
                        // 5秒后自动隐藏
                        setTimeout(() => {
                            message.style.opacity = '0';
                            message.style.transform = 'translateX(100%)';
                            
                            // 完全移除元素
                            setTimeout(() => {
                                message.remove();
                            }, 300);
                        }, 5000);
                    }, index * 100); // 每个消息延迟100ms显示
                });
            }
            
            // 页面加载完成后初始化
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', initFlashMessages);
            } else {
                initFlashMessages();
            }
        })();
    </script>
    
    {% block extra_js %}
    {% endblock %}
</body>
</html>